<template>
	<view class="">
		<NavBar title="购买记录" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="main">
			<scroll-view scroll-y="true" :style="{height: contentHeight }" :refresher-threshold="100"
				@scrolltolower="scrolltolowerFun" refresher-enabled="true" refresher-default-style="none">
				<view class="main_list">
					<view class="main_item  m_b_28" v-for="(item,index) in mainList" :key="index">
						<view class="m_b_28 flex_both">
							<text class="f_28_0_b">
								{{item.order_name}}
							</text>
							<text class="f_22_9" style="color: #979696;">
								{{item.pay_time}}
							</text>
						</view>
						<view class="flex_both ">
							<text class="f_24_0 m_r_12" style="color: #979696;">
								价格：{{item.price}}
							</text>
							<text class="f_24_0" style="color: #979696;">
								区域：{{item.city}}
							</text>
							<!-- <text class="f_24_0" style="color: #979696;">
							已结算
						</text> -->
						</view>
						<view class="flex m_t_28" style="justify-content: flex-end;" v-if="iscs(item)">
							<view class="t_btn" @click="onShowModal(index)">
								<text class="f_24_f m_b_6">
									退款
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="empty_box" v-if="!loadShow &&mainList.length ==  0">
					<view class="">
						<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</up-empty>
					</view>
				</view>
				<view class="loading_box m_t_32 " style="padding-bottom: 32rpx;" v-if="loadShow">
					{{ loadMessage }}
				</view>
			</scroll-view>
		</view>
	</view>
	<up-modal :show="modalShow" title="提示" content='确定要退款吗?' :showCancelButton="true" confirmColor="#FA5A28"
		@confirm="onModalOk" @cancel="onModalCancel"></up-modal>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 76}rpx)`
			}
		});
		getMallList()
	})
	// 
	const page = ref(1)
	const loadShow = ref(false)
	const loadMessage = ref('加载中')
	const scrolltolowerFun = () => {
		if (loadShow.value) return
		page.value = ++page.value;
		loadShow.value = true;
		setTimeout(() => {
			getMallList()
		}, 1000)
	}
	const mainList = ref([])
	const getMallList = async () => {
		if (loadMessage.value == '没有更多了') {
			loadShow.value = true;
			setTimeout(() => {
				loadShow.value = false;
			}, 200)
			return
		}
		let res = await proxy.$http('my.buyList', { page: page.value })
		let data = res.data.data
		if (res.code == 1) {
			if (data.length == 0) {
				loadMessage.value = "没有更多了"
			} else {
				mainList.value.push(...data)
			}
		} else {
			loadMessage.value = "加载出错"
		}
		setTimeout(() => {
			loadShow.value = false;
		}, 200)
	}
	const iscs = (e) => {
		let cT = new Date().getTime()
		let t = new Date(e.pay_time).getTime()
		if (cT - t > 86400000) {
			return false
		}
		if (e.is_tuikuan) {
			return false
		}
		return true
	}
	// 退款
	const modalShow = ref(false)
	const activeIdx = ref()
	const onShowModal = (e) => {
		activeIdx.value = e
		modalShow.value = true
	}
	const onModalOk = () => {
		modalShow.value = false
		tuikuan()
	}
	const onModalCancel = () => {
		modalShow.value = false
	}
	const tuikuan = async () => {
		if (activeIdx.value || activeIdx.value == 0) {
			let res = await proxy.$http('my.tuikuan', { order_id: mainList.value[activeIdx.value].order_id })
			if (res.code == 1) {
				uni.$u.toast('退款成功')
				setTimeout(() => {
					loadMessage.value = "加载中"
					page.value = 1
					mainList.value = []
					getMallList()

				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F7F8FC;
		padding: 20rpx;
		padding-bottom: 64rpx;

		.main_list {
			padding: 24rpx 0;
			overflow: auto;

			.main_item {
				padding: 22rpx 24rpx;
				background: #FFFFFF;
				box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
				border-radius: 5rpx;

				.t_btn {
					width: 126rpx;
					height: 49rpx;
					border-radius: 24rpx;
					background: #FD6C25;
					// border: 2rpx solid #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

	}
</style>